<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

let chart: echarts.ECharts | null = null

// 静态数据
const metrics = [
  { name: '用户量', value: '2,000', total: '120,000' },
  { name: '访问量', value: '20,000', total: '500,000' },
  { name: '下载量', value: '8,000', total: '120,000' },
  { name: '使用量', value: '5,000', total: '50,000' },
]

const trendData = {
  xAxis: [
    '6:00',
    '7:00',
    '8:00',
    '9:00',
    '10:00',
    '11:00',
    '12:00',
    '13:00',
    '14:00',
    '15:00',
    '16:00',
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00',
    '23:00',
  ],
  series: [
    80000, 60000, 40000, 20000, 0, 25000, 35000, 45000, 55000, 65000, 75000,
    60000, 50000, 40000, 30000, 20000, 10000, 0,
  ],
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  chart?.dispose()
})

const initChart = () => {
  const chartDom = document.getElementById('trendChart')
  if (!chartDom) return

  chart = echarts.init(chartDom)

  const option = {
    title: {
      text: '流量趋势',
      left: 'center',
      textStyle: {
        fontSize: 16,
        color: '#333',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: trendData.xAxis,
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: 'value',
      name: '访问量',
      axisLabel: {
        formatter: (value: number) => `${value / 10000}万`,
      },
    },
    series: [
      {
        data: trendData.series,
        type: 'line',
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.6)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.02)' },
          ]),
        },
        itemStyle: {
          color: '#409EFF',
        },
      },
    ],
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true,
    },
  }

  chart.setOption(option)
}

const handleResize = () => {
  chart?.resize()
}
</script>

<template>
  <div class="dataShow">
    <!-- 指标卡片 -->
    <div class="metric-grid">
      <div v-for="(item, index) in metrics" :key="index" class="metric-card">
        <div class="current">{{ item.value }}</div>
        <div class="title">{{ item.name }}</div>
        <div class="total">总{{ item.name }} {{ item.total }}</div>
      </div>
    </div>

    <!-- 趋势图 -->
    <div id="trendChart" class="chart-container"></div>
  </div>
</template>

<style lang="scss" scoped>
.dataShow {
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.metric-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;

  .current {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .title {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
  }

  .total {
    font-size: 12px;
    color: #999;
  }
}

.chart-container {
  width: 100%;
  height: 500px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
